﻿@page "/circularArc"
@using VectSharp;
@using VectSharp.SVG;

<style>
	table {
		table-layout: fixed;
	}

	td {
		width: 200px;
		padding: 10px;
	}
</style>

<div style="width: 100vw; height: 100vh; position: relative;">
	<div style="width: calc(100% - 400px); height: 100%; position: absolute; top: 0; left: 0; text-align: center">
		<img src="@imgSource" style="max-width: 100%; max-height: 100%; margin-top: 50vh; transform: translate(0, -50%)" />
	</div>

	<div style="width: 400px; height: 100vh; position: absolute; top: 0; right: 0;">
		<table style="margin-top: 50vh; transform: translate(0, -50%)">
			<tr>
				<td>
					<MatNumericUpDownField Label="Centre X"
										   @bind-Value=@cX
										   Step="1">
					</MatNumericUpDownField>
				</td>
				<td>
					<MatNumericUpDownField Label="Centre Y"
										   @bind-Value=@cY
										   Step="1">
					</MatNumericUpDownField>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="width: 400px; text-align: center">
					<MatNumericUpDownField Label="Radius"
										   @bind-Value=@r
										   Minimum="0"
										   Step="1">
					</MatNumericUpDownField>
				</td>
			</tr>
			<tr>
				<td>
					<MatNumericUpDownField Label="Start angle"
										   @bind-Value=@startAngle
										   DecimalPlaces=2
										   Step="0.01">
					</MatNumericUpDownField>
				</td>
				<td>
					<MatNumericUpDownField Label="End angle"
										   @bind-Value=@endAngle
										   DecimalPlaces=2
										   Step="0.01">
					</MatNumericUpDownField>
				</td>
			</tr>

		</table>
	</div>
</div>

@code {
	private double _cX = 50;
	private double cX
	{
		get
		{
			return _cX;
		}

		set
		{
			_cX = value;
			Render();
		}
	}

	private double _cY = 50;
	private double cY
	{
		get
		{
			return _cY;
		}

		set
		{
			_cY = value;
			Render();
		}
	}

	private double _r = 40;
	private double r
	{
		get
		{
			return _r;
		}

		set
		{
			_r = value;
			Render();
		}
	}

	private double _startAngle = 0.79;
	private double startAngle
	{
		get
		{
			return _startAngle;
		}

		set
		{
			_startAngle = value;
			Render();
		}
	}

	private double _endAngle = 3.14;
	private double endAngle
	{
		get
		{
			return _endAngle;
		}

		set
		{
			_endAngle = value;
			Render();
		}
	}



	private string imgSource = "";

	protected override Task OnInitializedAsync()
	{
		Render();
		return Task.CompletedTask;
	}

	public void Render()
	{
		Page page = new Page(100, 100);
		Graphics graphics = page.Graphics;

		GraphicsPath path = new GraphicsPath().Arc(cX, cY, r, startAngle, endAngle);

		graphics.StrokePath(new GraphicsPath().MoveTo(cX, cY).LineTo(cX + r * Math.Cos(startAngle), cY + r * Math.Sin(startAngle)), Colour.FromRgb(180, 180, 180), 1, lineDash: new LineDash(5, 5, 0));
		graphics.StrokePath(new GraphicsPath().MoveTo(cX, cY).LineTo(cX + r * Math.Cos(endAngle), cY + r * Math.Sin(endAngle)), Colour.FromRgb(180, 180, 180), 1, lineDash: new LineDash(5, 5, 0));

		graphics.FillPath(new GraphicsPath().Arc(cX, cY, 2, 0, 2 * Math.PI), Colour.FromRgb(180, 180, 180));

		graphics.FillPath(path, Colours.Green);
		graphics.StrokePath(path, Colours.Black, 2);

		using (MemoryStream ms = new MemoryStream())
		{
			page.SaveAsSVG(ms);
			ms.Seek(0, SeekOrigin.Begin);

			using (StreamReader sr = new StreamReader(ms))
			{
				this.imgSource = "data:image/svg+xml;base64," + Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(sr.ReadToEnd()));
			}
		}
	}
}
